<template>
  <div>
    <div class="strategyFatherBox">
      <el-button type="success" size='small' @click="dialogVisible" class="handadd">{{$t('手动添加')}}</el-button>
      <el-button type="success" size='small' @click="autoDetectDialogVisible" class="autoadd">{{$t('自动探测')}}</el-button>
      <el-button type="danger" size='small' @click="deleteData" class="delClick">{{$t('删除')}}</el-button>
      <el-switch :width="lang === 'zh'?68:95" v-model="bindType" class="bindType switch" @change='changePolicyMode' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('功能开')" :inactive-text="$t('功能关')"></el-switch>
    </div>
    <el-table ref="multipleTable" size='mini' :data="policyList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <el-table-column prop="id" label="ID" align='center' min-width="100">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="ip" align='center' label="IP" min-width="300">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="iptype" align='center' :label="$t('IP类型')" :formatter="iptypeShow" min-width="100"></el-table-column>
      <el-table-column prop="mac" align='center' label="MAC" min-width="250"></el-table-column>
      <el-table-column align='center' width='190' fixed="right" :label="$t('主动防御配置')">
        <template slot-scope="scope">
          {{stateList[scope.row.state]}}
          <el-button type="success" plain size="mini" @click="arpDefenseDialogVisible(scope.row)" :disabled='scope.row.iptype === 1' style="margin-left:10px;">{{$t('配置')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <bind-dialog v-if="bindDialogVisible" ref="refBindDialogVisible"></bind-dialog>
    <auto-detect-dialog v-if="autoDetectDialog" ref="refAutoDetectDialogVisible"></auto-detect-dialog>
    <arp-defense-dialog v-if="arpDefenseVisible" ref="refArpDefenseDialogVisible"></arp-defense-dialog>
  </div>
</template>
<script>
import { getBindArray, changeBindStatus, delBind, getBindStatus } from '@/api/safe/bind'
import BindDialog from './components/BindDialog'
import AutoDetectDialog from './components/AutoDetectDialog'
import ArpDefenseDialog from './components/ArpDefenseDialog'
export default {
  name: 'bind',
  components: {
    BindDialog,
    AutoDetectDialog,
    ArpDefenseDialog
  },
  data () {
    return {
      bindDialogVisible: false,
      autoDetectDialog: false,
      arpDefenseVisible: false,
      policyList: [],
      infoJson: [],
      bindType: 'enable',
      lang: this.$i18n.locale,
      stateList: {
        'enable': this.$t('已开启'),
        'disable': this.$t('已关闭')
      }
    }
  },
  created () {
    this.listData()
    getBindStatus().then(res => {
      if (res.status === 0) {
        this.bindType = res.info[0].state === 1 ? 'enable' : 'disable'
      }
    })
  },
  methods: {
    // 多选按钮
    handleSelectionChange (data) {
      this.infoJson = data
    },
    // 列表
    listData () {
      getBindArray().then(res => {
        if (res.status === 0) {
          this.policyList = res.info
        }
      })
    },
    // 添加按钮表单
    dialogVisible (data) {
      this.bindDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refBindDialogVisible.init(data)
      })
    },
    arpDefenseDialogVisible (data) {
      this.arpDefenseVisible = true
      this.$nextTick(() => {
        this.$refs.refArpDefenseDialogVisible.init(data)
      })
    },
    deleteData () {
      if (this.infoJson && this.infoJson.length > 0) {
        this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
          closeOnClickModal: false,
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          confirmButtonClass: 'confirmButton',
          cancelButtonClass: 'confirmCancelButton',
          type: 'warning'
        }).then(() => {
          delBind({ bind: JSON.stringify(this.infoJson) }).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('删除成功'),
                type: 'success'
              })
              this.infoJson = []
              this.listData()
            }
          })
        })
      } else {
        this.$messages.error(this.$t('请至少选择一条数据进行删除'))
      }
    },
    autoDetectDialogVisible () {
      this.autoDetectDialog = true
      this.$nextTick(() => {
        this.$refs.refAutoDetectDialogVisible.init()
      })
    },
    iptypeShow (data) {
      return data.iptype ? 'IPv6' : 'IPv4'
    },
    changePolicyMode (data) {
      if (data === 'enable' && this.policyList.length < 1) {
        this.$confirm(this.$t('无数据时,会禁止所有的IP数据连接'), this.$t('提示'), {
          closeOnClickModal: false,
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          confirmButtonClass: 'confirmButton',
          cancelButtonClass: 'confirmCancelButton',
          type: 'warning'
        }).then(() => {
          this.funBindStatus(data)
        }).catch(e => {
          this.bindType = !data
        })
      } else {
        this.funBindStatus(data)
      }
    },
    funBindStatus (data) {
      changeBindStatus({ status: data }).then(res => {
        if (res.status === 0) {
          this.$message({
            message: this.$t(res.msg),
            type: 'success'
          })
          this.listData()
        }
      }).catch(() => {
        this.bindType = !data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.strategyFatherBox {
  .defineSwitch {
    width: 68px;
    margin-left: 10px;
  }
  .defineSwitch.ivu-switch-large.ivu-switch-checked:after {
    left: 47px !important;
  }
  .ivu-switch-checked {
    border-color: #5fb878;
    background-color: #5fb878;
  }
  .el-switch {
    margin-left: 10px;
  }
}
</style>
